<template>
    <div style="padding: 10px ;">
        <div style=" width: 600px;">
            <div style="margin-left: 40px; margin-top: 30px; color: dodgerblue; font-size:28px ;">编辑个人信息</div>
            <div style="text-align: center; width: 100%;">
                <el-avatar :src="this.form.portrait ? this.form.portrait : require('@/assets/defaultPortrait.png')"
                    :size="100">
                </el-avatar>
                <el-upload ref="upload" action="http://localhost:9090/files/upload" :on-success="filesUploadSuccess">
                    <el-button type="success">更换图片</el-button>
                </el-upload>
            </div>
            <div style="text-align: center; width: 100%;">
                <el-form label-width="100px" :model="form" :rules="rules" ref="form" style="width: 500px;margin-top: 30px;">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" :placeholder="form.username ? form.username : '请输入'"
                            style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="匿名" prop="nickName">
                        <el-input v-model="form.nickName" :placeholder="form.nickName ? form.nickName : '请输入'"
                            style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="form.age" :placeholder="form.age ? form.age : 100" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="form.address" :placeholder="form.address ? form.address : '请输入'"
                            style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div style="text-align: center; width: 100%;">
                <el-row>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button type='primary'  @click.native="$router.push('/home')">取消</el-button>
                </el-row>
                <el-button type="warning" style="margin-top: 10px;"
                    @click.native="$router.push('/setPassword')">前往修该密码</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
    data() {
        return {
            userId: null,
            form: {},
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                nickName: [
                    { required: true, message: '请输入匿名', trigger: 'blur' },
                ],
                age: [
                    {
                        required: true, message: '年龄不能为空', trigger: 'blur'
                    },
                    {
                        pattern: /^((1[0-5])|[1-9])?\d$/, message: '年龄只能输入正三位数', trigger: 'blur'
                    },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
            },
        };
    },
    mounted() {
        this.userId = JSON.parse(sessionStorage.getItem("user")).id
        this.loading();
    },
    // created() {
    //     this.loading();
    // },
    methods: {
        filesUploadSuccess(res) {
            this.form.portrait = res.data

        },
        save() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    request.put("/user", this.form).then(res => {
                        if (res.code === "0") {
                            alert('保存成功!');
                            // this.$message({
                            //     type: "success",
                            //     message: "保存成功",
                            // });
                            // this.$router.push("/")
                            sessionStorage.setItem("user", JSON.stringify(this.form))
                            this.$bus.$emit('nn',this.form.nickName)
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                    })
                }
            })

        },
        loading() {
            request.get("/user/" + this.userId).then((res) => { this.form = res.data;
            console.log(this.form); });
        },
    }
}
</script>

<style></style>